<template>
	<div id="product">
		<div style="width: 100%; height: 100px; ">
			<el-form :inline="true" :model="formInline" class="demo-form-inline" style="inline-heigth: 100px; text-align: center; margin: auto;">
							  <el-form-item  label="商品名称:">
							    <el-input v-model="productVo.productName" placeholder="请输入商品名">
								</el-input>
							  </el-form-item>
							  <el-form-item>
								   <el-button  type="primary" @click="onSubmit">查询</el-button>
							  </el-form-item>
				</el-form>
		</div>
						
					
				<el-table :data="product" style="width: 100%">
					<el-table-column prop="id" label="编号" width="180">
					</el-table-column>
				  <el-table-column prop="productId" label="商品编号" width="180">
				  </el-table-column>
				  <el-table-column prop="productName" label="商品名称" width="180">
				  </el-table-column>
				  <el-table-column prop="type" label="类型">
					  <template slot-scope="scope">
							<span v-if="scope.row.type=='1'">生活用品</span>
							<span v-if="scope.row.type=='2'">果蔬</span>
							<span v-if="scope.row.type=='3'">食品饮料</span>
							<span v-if="scope.row.type=='4'">香烟</span>
							<span v-if="scope.row.type=='5'">雪糕</span>
							<span v-if="scope.row.type=='6'">槟榔</span>
							<span v-if="scope.row.type=='7'">杯子</span>
							<span v-if="scope.row.type=='8'">服饰</span>
							<span v-if="scope.row.type=='9'">饮品</span>
							<span v-if="scope.row.type=='10'">生活用品</span>
							<span v-if="scope.row.type=='11'">生活用品</span>
							<span v-if="scope.row.type=='12'">饮品</span>
							<span v-if="scope.row.type=='13'">纸巾</span>
							<span v-if="scope.row.type=='14'">衣服裤子</span>
					  </template>
				  </el-table-column>
				  <el-table-column prop="productDetail" label="商品描述">
				  </el-table-column>
				  <el-table-column prop="imageurl" label="商品图片" align="center" width="150">
					<!-- <template slot-scope="scope">
					<el-image  v-for="(item,index) in getImageUrls(screen.row)"
					:key="index"
					:src="getImagePach(item)"
					:preview-src-lise="[getImagePath(item)]"
						  ></el-image>
					  </template> -->
					  </el-table-column>
				  <!--操作列-->
				  <el-table-column label="操作">
					  <template slot-scope="scope">
						<el-button 
							size="small"
							type="primary"
							round 
							icon=""
							@click="open(scope.$index,scope.row)">供应</el-button>
					  </template>
					</el-table-column>
				 </el-table>
				
				 
				 
				 <!---分页组件-->
					 <el-pagination  style="inline-heigth: 100px; text-align: center; margin: auto;"
					 @size-change="handleSizeChange"
						  @current-change="handleCurrentChange"
						  :current-page="pageNo"
						  :page-sizes="pageSizeList"
						  :page-size="pageSize"
						  layout="total, sizes, prev, pager, next, jumper"
						  :total="total">
					 </el-pagination>
					 
					 
					 <!-- 添加对话框 -->
					    <el-dialog title="供应商品" :visible.sync="makeFormVisible"  >
					       <el-form >
					         <el-form-item label="编号" :label-width="formLabelWidth">
					         <template slot-scope="scope">
								   <el-input readonly v-model="productOne.id"></el-input>
							 </template>
					         </el-form-item>
					         <el-form-item label="商品名称" :label-width="formLabelWidth">
					           <el-input readonly v-model="productOne.productName"></el-input>
					         </el-form-item>
					 		 <el-form-item label="可供应价格" :label-width="formLabelWidth">
					 		<el-input v-model="productOne.stock"> </el-input>
					 		 </el-form-item>
					       </el-form>
					        <div slot="footer" class="dialog-footer">
					         <el-button @click="makeFormVisible = false">取消</el-button>
					         <el-button type="primary" @click="saveStorageCell()">确定</el-button>   
					       </div>
					     </el-dialog>
	
	</div>
</template>

<script>
import { time } from 'echarts'
	export default{
			data() {
				return{
					product: [],
					makeFormVisible:false,
					//回显商品对象
					productOne:{},
					formInline: {
							  user: '',
							  region: ''
							},
							// 当前页号
							pageNo: 1,
							// 当前页大小
							pageSize: 2,
							// 总记录数
							total: 0,
							// 页大小列表
							pageSizeList: [2, 5, 10, 20],
							//查询条件
							productVo:{
								productName:'',
							},
							//添加对话框的显示
							makeFormVisible: false,
							//添加表单的对象
							makeForm: {},
							//lable宽度
							formLabelWidth: '120px',
				}
			},
			methods:{
				onSubmit() {
						this.storageCellPage()
					  },
					  search() {
					  	//查询
					  	this.pageNo = 1
					  	this.storageCellPage()
					  },
					  // 页大小改变
					  handleSizeChange(val) {
						  this.pageSize = val
						  this.storageCellPage()
					  },
					  
					//页号改变
					handleCurrentChange(val) {
						this.pageNo = val
						// 重新查询
						this.storageCellPage()
					},
					//分页查询商品供应信息
					async storageCellPage() {
						// 用es6的解构函数
						let id=sessionStorage.getItem("token")
						console.log(this.productName)
						const {data: res} = await this.$http.post
						(`buy/product/listPagelist/${this.pageSize}/${this.pageNo}`,this.productVo)
						this.product = res.list
						this.total = res.total
					},
						getImageUrls(row){	
						},
					
						getImagePath(filename){
							return this/imagePathPrefix + filename; //拼接完整的图片路径
						},
						async open(index,row){
							//显示对话框
							this.makeFormVisible = true
							//用row回显数据
							this.productOne.id=row.id
							this.productOne.productName=row.productName
							
							//拿用户id
							this.id=this.$store.state.user.id		
							const {data: res} = await this.$http.post(`buy/product/buyid/${row.id}`)
							    this.productOne=res
								//定义用户id
								let id=this.id
							this.productOne.id=id
						},
						//点击确定供应成功
						async saveStorageCell(){
								let userId=sessionStorage.getItem("token")
								this.productOne.productId=this.productOne.id
								this.productOne.productPrice=this.productOne.stock
								const {data: res} = await this.$http.post(`buy/productSupplier/saveStorageCellIdApp/${userId}`,this.productOne)
								console.log(this.productOne)				
								this.$message({
									showClose: true,
									message:'供应成功',
									type:'success'
								});
								this.makeFormVisible=false
						}
			},
    created() {
        this.storageCellPage()

    }
  }

</script>

<style>
	
</style>